<template>
	<!-- 列表项 -->
	<view class="card" :style="isShow ? '' : 'height: 50px;'">
		<view class="card_title">
			<view class="card_title_left">
				<image style="width: 1.2rem;; height: 1.2rem;"
					src='~@/static/images/correction/correction-warn-warning.png'>
				</image>
				预警信息
			</view>
			<view class="card_title_right">
				<u-icon @click="toShow()" :name="isShow ? 'arrow-down' : 'arrow-up'" size="20"></u-icon>
			</view>
		</view>
		<view v-if="isShow">
			<u-divider style="margin: 0 0 0.6rem 0;"></u-divider>
			<view class="card_records" :style="isView ? 'height: 72%' : ''">
				<view v-for="(item, index) in warnList" :key="index" class="card_records_item">
					<view v-text="Tp_crc_warn[item.type].name " class="card_records_item_left"
						:style="index == warnList.length - 1 ? 'border-right: 1px solid #fff;' : ''">
					</view>
					<view class="card_records_item_right">
						<view class="card_records_item_right_icon">
							<!-- 圆心点 -->
							<view class="card_records_item_right_icon_item">
							</view>
						</view>

						<view v-text="item.rectime" class="card_records_item_right_time">
						</view>
						<view v-text="item.addr" class="card_records_item_right_addr">
						</view>
						<view @click="openPreview(item.photo)" class="card_records_item_right_view">
							查看图片
						</view>
					</view>
				</view>

			</view>
			<u-divider style="margin: 0.6rem 0;"></u-divider>
			<view class="card_situation">
				<view class="card_situation_title">
					<span v-if="!isView">*</span>核实情况:
					<a v-if="isView" style="margin-left: 0.5rem;"> &nbsp;{{ Tp_crc_work[verifyValue].name }}</a>
				</view>

				<view v-if="!isView">
					<u-radio-group placement="row">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radioList"
							:key="item.value" :label="item.name" :name="item.value" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
	import {
		findListByPerid
	} from '@/common/api/correction/cre_warning.js'
	import {
		Tp_crc_warn
	} from '@/common/enumeration/Tp_crc_warn.js'
	import {
		Tp_crc_work,
		Tp_crc_workValue
	} from '@/common/enumeration/Tp_crc_work.js'
	import {
		urlConvert
	} from '@/common/js/urils.js';
	
	export default {
		props: {
			perid: {
				type: String,
				require: true
			},
			worktype: {
				type: String,
				require: true
			},
			isView: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				isShow: true,
				Tp_crc_work: Tp_crc_work,
				Tp_crc_warn: Tp_crc_warn,
				radioList: [{
						name: '待核实',
						value: Tp_crc_workValue.UNDO
					},
					{
						name: '已核实',
						value: Tp_crc_workValue.DONE
					},
					{
						name: '系统误报',
						value: Tp_crc_workValue.CANCEL
					},
				],
				verifyValue: null,
				warnList: [],
			}
		},
		created() {
			// console.log('this.worktype', this.worktype)
			this.verifyValue = Number(this.worktype)
			this.getList(this.perid)
		},

		methods: {
			toShow() {
				this.isShow = !this.isShow
			},
			openPreview(image) {
				// 打开预览
				uni.previewImage({
					urls: [image]
				})
			},
			async getList(perid) {
				const {
					data
				} = await findListByPerid(perid)
				data && data.forEach(v => {
					v.photo = urlConvert(v.photo)
				})
				console.log('预警信息', data)
				this.warnList = data || []
			},
			radioChange(val) {
				this.verifyValue = val
				console.log('verifyValue', this.verifyValue)
				this.$EventBus.$emit('setVerifyValue', this.verifyValue)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/flex.scss';

	::v-deep .u-radio {
		width: 33%;
		padding-top: 25rpx;
	}

	// 列表项
	.card {
		box-shadow: 0rpx 4rpx 10rpx #ccc;
		border-radius: 20rpx;
		background-color: #ffffff;
		margin-bottom: 30rpx;
		width: 86%;
		// height: 810rpx;
		position: relative;
		// border: 1px solid red;
		padding: 0% 4%;

		&_title {
			height: 50px;
			@extend .space_between;
			align-items: center;
			// border: 1px solid red;

			&_left {
				width: 94%;
				display: flex;
				align-items: center;

				image {
					margin-right: 0.6rem;
				}
			}

			&_right {
				// width: 3%;
				margin-right: 4%;
			}

		}

		&_records {
			// height: 66%;
			// border: 1px solid red;
			overflow: auto;
			max-height: 240px;
			min-height: 90px;

			&_item {
				width: 100%;
				height: 110px;
				// border: 1px solid blue;
				@extend .algin_justity_center;

				&_left {
					height: 100%;
					width: 26%;
					// border: 1px solid blue;
					border-right: 1px solid #2074D4;
					color: #1F1F1F;
				}

				&_right {
					// border: 1px solid red;
					width: 74%;
					height: 100%;
					position: relative;
					padding-left: 6%;

					// 自定义步骤条图标
					&_icon {
						width: 20px;
						height: 20px;
						border-radius: 20px;
						color: #fff;
						border: 1px solid #3496FB;
						@extend .algin_justity_center;
						background-color: #fff;
						position: absolute;
						left: -12px;

						&_item {
							width: 10px;
							height: 10px;
							background-color: #3496FB;
							border-radius: 10px;
						}
					}

					&_time {
						// height: 30%;
					}

					&_addr {
						padding-top: 1%;
						height: 50%;
						color: #bbb;
						// border: 1px solid red;
					}

					&_view {
						// height: 20%;
						color: #2074D4;
						text-align: right;
					}
				}
			}

		}

		&_situation {
			padding: 5px 0 10px 0;
			// border: 1px solid red;

			&_title {
				span {
					color: #F55545;
				}
			}

			&_select {
				padding: 10px 0 0 0;
				height: 50%;
				// border: 1px solid red;
				display: flex;
				align-items: center;

				&_radio {
					display: flex;
					width: 33%;
				}
			}
		}
	}
</style>